import styles from "@pages/home/widgets/channel/styles/edit.module.less";
import GeekIcon from "@shared/geekIcon";
import React from "react";
import { useTypedDispatch } from "@store/index";
import { removeGuestChannel } from "@slice/guestChannel";
import useGuestChannels from "@pages/home/hooks/useGuestChannels";


export default function Selected() {
    // 获取 dispatch 方法
    const dispatch = useTypedDispatch();
    // 获取访客频道列表
    const guestChannels = useGuestChannels();
    return (
        <>
            <div className={styles.title}>
                <h3>我的频道</h3>
                <h4>点击进入频道</h4>
                <button className={styles.active}>完成</button>
            </div>
            <div className={styles.list}>
                <span className={styles.active}>推荐</span>
                {guestChannels.map((channel: any) => (
                    <span>
                        人工智能 <GeekIcon type={"iconbtn_tag_close"} onClick={() => dispatch(removeGuestChannel(channel.id))} />
                    </span>
                ))}

                <span>数据分析</span>
                <span>后端</span>
                <span>前端</span>
                <span>测试</span>
                <span>数据库</span>
            </div>
        </>
    );
}